<template>
	<view class="search-bar">
		<!-- 左侧：汉堡包按钮 -->
		<uni-icons @click="showDrawer" type="bars" color="#fff" size="26" />
		<!-- 隐藏的固定定位元素：抽屉 -->
		<uni-drawer ref="leftDrawer" :width="300">
			<view style="padding: 30rpx;">
				<uni-list>
					<uni-list-item to="../../pages/index/index" link="switchTab" title="首页"></uni-list-item>
					<uni-list-item to="../../pages/brands/brands" link="switchTab" title="品牌馆"></uni-list-item>
					<uni-list-item to="../../pages/product-category/product-category" link="switchTab" title="分类"></uni-list-item>
					<uni-list-item to="../../pages/user-center/user-center" link="switchTab" title="登录"></uni-list-item>
					<uni-list-item to="../../pages/user-center/user-center" link="switchTab" title="注册"></uni-list-item>
				</uni-list>
				<button @click="hideDrawer" type="default" size="mini">关闭</button>
			</view>
		</uni-drawer>
		<!-- 中间：搜索框 -->
		<view class="input-group" @click="jumpToSearch">
			<input type="text" placeholder="请输入商品关键字" />
			<image src="../../static/img/logo-s.png" />
			<uni-icons class="search" type="search" color="#888" />
		</view>
		<!-- 右侧：可点击的文字 -->
		<navigator class="link" open-type="switchTab" url="../../pages/user-center/user-center">登录</navigator>
	</view>
</template>

<script>
	export default {
		name: "xz-search-bar",
		data() {
			return {

			};
		},
		methods: {
			jumpToSearch() {
				// 导航跳转/保留跳转
				uni.navigateTo({
					url: "../../pages/product-search/product-search"
				})
			},
			showDrawer() {
				// 通过组件的引用，找到抽屉组件，调用 " 打开 " 方法
				this.$refs.leftDrawer.open();
			},
			hideDrawer() {
				// 通过组件的引用，找到抽屉组件，调用 " 关闭 " 方法
				this.$refs.leftDrawer.close();
			}
		}
	}
</script>

<style lang="scss">
	.search-bar {
		display: flex;
		align-items: center;
		background-color: $xz-theme;
		padding: 30px 6px 15px;

		.bars {}

		.input-group {
			flex: 1;
			position: relative;
			margin: 0 10px;

			input {
				background-color: #fff;
				text-align: center;
				height: 26px;
				border-radius: 13px;
				font-size: $uni-font-size-sm;
			}

			image {
				width: 18px;
				height: 18px;
				position: absolute;
				left: 6px;
				top: 5px;
			}

			.search {
				position: absolute;
				right: 5px;
				top: 5px;
				font-size: $uni-font-size-base;
			}
		}

		.link {
			color: #fff;
		}
	}
</style>
